<!--  数据统计模版-->
<template>
  <el-card class="rounded-15px">
    <div class="h-360px flex items-center flex-wrap">
      <div
        v-for="item of cardData"
        :key="item.id"
        class="w-full text-white h-80px rounded-full py-5px px-40px cursor-pointer"
        :style="{ 'background': `linear-gradient(90deg, ${item.colors[0]}, ${item.colors[1]})` }"
      >
        <p class="text-xl font-medium">{{ item.title }}</p>
        <div class="flex items-center justify-between">
          <Icon
            class="text-2xl mt-3"
            :icon="item.icon"
          />
          <count-to
            class="text-2xl"
            :end-value="item.value"
            :prefix="item.unit"
          />
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import {} from 'vue';
import { Icon } from "@iconify/vue";

interface CardData {
  id: string;
  title: string;
  value: number;
  unit: string;
  colors: [string, string];
  icon: string;
}

const cardData: CardData[] = [
  {
    id: 'visit',
    title: '访问量',
    value: 1000000,
    unit: '',
    colors: ['#ec4786', '#b955a4'],
    icon: 'ant-design:bar-chart-outlined'
  },
  {
    id: 'amount',
    title: '成交额',
    value: 234567.89,
    unit: '$',
    colors: ['#865ec0', '#5144b4'],
    icon: 'ant-design:money-collect-outlined'
  },
  {
    id: 'trade',
    title: '成交数',
    value: 999999,
    unit: '',
    colors: ['#fcbc25', '#f68057'],
    icon: 'ant-design:trademark-circle-outlined'
  }
];
</script>

<style scoped>
:deep(.el-statistic__prefix){
  color:white;
  font-size: 30px
}
</style>
